<!doctype html>
<!--
 *
 * Assignment 1 web app
 * 
 * Copyright (c) 2016-2017  Monash University
 *
 * Written by Michael Wybrow
 * 
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
-->
<html lang="en">
<head>
    {% load static %}
<title>Height Estimate</title>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="author" content="Michael Wybrow">
<meta name="description" content="Monash University, Australia. All rights reserved.">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="{%static "css/style.css" %}" />
<link rel="shortcut icon" sizes="196x196" href="surveyapp.png" />
<link rel="apple-touch-icon-precomposed" href="surveyapp.png" />
</head>
<body>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
          <header class="mdl-layout__header">
            <div class="mdl-layout__header-row">
              <span class="mdl-layout-title" id="header">Height Estimate</span>
            </div>
          </header>

          <main class="mdl-layout__content" >
              <div class="page-content" data-role="page" id="camera-page">
                    <div id="video-container"></div>
                    <div id="hud"></div>
                    <div id="controls">
                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" onclick="setCameraHeightValue()">Set cam height</button>
                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" onclick="setBaseTiltAngle()">Set base</button>
                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" onclick="setApexTiltAngle()">Set apex</button>
                    </div>
              </div>
          </main>
          <div id="toast" class="mdl-js-snackbar mdl-snackbar">
              <div class="mdl-snackbar__text"></div>
              <button class="mdl-snackbar__action" type="button"></button>
          </div>
    </div>

	<!-- LIBRARIES / PLUGINS -->
	<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    	<!-- SCRIPTS -->
	<script src="{% static "js/CameraVideoPageController.js" %}"></script>
	<script src="{% static "js/HeightEstimate.js" %}"></script>
    
</body>
</html>
